import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
const TemplateSettings = props => {
  // eslint-disable-next-line react/prop-types
  const { history } = props;
  const [activeTab, setActiveTab] = useState();
  const TabList = [
    {
      name: '组织管理',
      router: '/asset-config/organization'
    },
    {
      name: '用户管理',
      router: '/asset-config/user-manage'
    },
    {
      name: '角色管理',
      router: '/asset-config/role-manage'
    }
  ];
  const callback = key => {
    history.push(key);
  };
  useEffect(() => {
    setActiveTab(history.location.pathname);
  }, []);
  return (
    <>
      <Tabs activeKey={activeTab} onTabClick={callback}>
        {TabList.map(r => {
          return <TabPane tab={r.name} key={r.router} />;
        })}
      </Tabs>
    </>
  );
};

export default connect()(TemplateSettings);
